<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

<!--   //默认值  -->
    <div v-if="flag">
        手机号码：<input type="text" placeholder="请输入手机号码">
    </div>
    <div v-if="!flag">
        邮箱：<input type="text" placeholder="请输入邮箱">
    </div>

<!--  //切换事件  -->
    <br>
    <input type="button" value="切换" @click="change" >

</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    var dataObj={
     flag: true
    };

   var vm = new Vue({
       el:"#app",   //el，element：即要渲染的页面元素
       data:dataObj,
       methods:{
           change:function () {
               this.flag=!this.flag;
           }
       }
   });
</script>
</body>
</html>